<template>
  <div class="table-page-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="system-user-search mb15">
        <el-form ref="searchFormRef" :model="searchForm" inline>
          <el-form-item label="状态" prop="status">
            <CommonSelect v-model="searchForm.status" style="width: 120px" :options="statusOptions" placeholder="请选择">
            </CommonSelect>
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" @click="refresh">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
            <el-button size="default" @click="onReset">
              <el-icon>
                <ele-RefreshRight />
              </el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData.list" border :style="{ width: '100%' }" :loading="loading">
        <el-table-column prop="docName" label="资料名称"  />
        <el-table-column prop="author" label="作者" width="100" />
        <el-table-column prop="bonus" label="积分" width="100"/>
        <el-table-column prop="fileSize" label="文件大小" width="100" >
          <template #default="{ row }">
            <span>{{ row.fileSize }}M</span>
          </template>
        </el-table-column>
        <el-table-column prop="viewCounts" label="人气" width="100"/>
         
        <el-table-column prop="downCounts" label="下载" width="100" />
        <el-table-column prop="uploadTime" label="更新时间" width="100" />
        <el-table-column prop="created_at" label="状态" width="100" >
          <template #default="{ row }">
            <el-tag v-if="row.status === 'PASS'" type="success">{{ DocumentStatusLabel[row.status] }}</el-tag>
            <el-tag v-else-if="row.status === 'NO_REVIEW'" type="primary">{{ DocumentStatusLabel[row.status] }}</el-tag>
            <el-tag v-else-if="row.status === 'NOUPLOADED'" type="info">{{ DocumentStatusLabel[row.status] }}</el-tag>
            <el-tag v-else-if="row.status === 'REJECTED'" type="warning">{{ DocumentStatusLabel[row.status] }}</el-tag>
            <el-tag v-else-if="row.status === 'DELETED'" type="danger">{{ DocumentStatusLabel[row.status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="scope">
            <el-button 
             size="small"
             v-if="scope.row.status === 'NO_REVIEW'"
              text type="primary" 
              @click="handlePass(scope.row)">通过
            </el-button>
            <el-button 
             v-if="scope.row.status === 'NO_REVIEW'"
            size="small"
              text type="primary" 
              @click="handleReject(scope.row)">拒绝
            </el-button>
            <el-button 
             v-if="scope.row.status !== 'DELETED'"
            size="small"
              text type="primary" 
              @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <CommonPagination :pagination="pagination" :total="tableData.total"></CommonPagination>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import { useTable } from "/@/hooks/use-table";
import CommonPagination from '/@/components/common-pagination/index.vue';
import { readAllDocument, passDocument, rejectDocument, deleteDocument } from "/@/api/document";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { toOptions } from "/@/hooks/use-options";
import CommonSelect from '/@/components/common-select/index.vue';
import { DocumentStatusLabel } from "/@/constants";
import { ButtonPermission } from '/@/constants';
import { confirm } from '/@/utils/confirm';


const searchFormRef = ref<FormInstance>();

const searchForm = reactive({
  status: undefined
})


const { tableData, pagination, loading, refresh, resetAndRefresh } = useTable<any>(({ page, pageSize }) =>

readAllDocument({ page, pageSize, ...searchForm }).then((data) => {
    return {
      list: data?.list,
      total: data?.total
    }
  })
)

const statusOptions = toOptions(DocumentStatusLabel);


const onReset = () => {
  searchFormRef.value?.resetFields();
  resetAndRefresh();
}

const handlePass = (row: any) => {
  confirm(async () => {
    await passDocument(row.id);
    ElMessage.success('操作成功');
    refresh();
  }, '确认通过?');
}

const handleReject = (row: any) => {
  confirm(async () => {
    await rejectDocument(row.id);
    ElMessage.success('操作成功');
    refresh();
  }, '确认驳回?');
}

const handleDelete = (row: any) => {
  confirm(
    async () => {
      await deleteDocument(row.id);
      ElMessage.success('删除成功');
      refresh();
    }
  );
}




</script>
<style lang="scss" scoped></style>
../../../api/bonus